<!--  -->
<template>
    <div>
      <Card>
          <p slot="title">
              <Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
              我的服务商
              <Poptip placement="right-start" trigger="hover"  content="服务商为提供运维服务的厂商。如须增加服务商，请联系平台客服。">
                <Icon  style="color:#2d8cf0;cursor:pointer" type="information-circled"></Icon>
              </Poptip>
          </p>
          <Button 
              v-if="facilitatorList.length>0"  
              slot="extra" 
              size="small" 
              class="zh-hollow" 
              type="warning"
              style="marginLeft:15px;"
              @click="fac_edit=!fac_edit" 
          >
              {{fac_edit?'完成':'管理'}}
          </Button>
          <template v-if="facilitatorList.length>0">
              <div class="zh-flex ">
                  <dl v-for="item in facilitatorList" :key="item.value" class="module-item">
                      <dt class="module-item-body">
                          <img :src="item.image_url" alt="">
                          <Icon @click.native="removeFac(item)" :size="25" v-if="fac_edit&&btnp.xtgl_fwsgli_sc" class="remove" type="minus-circled"></Icon>
                      </dt>
                      <dd class="module-item-foot">{{item.name}}</dd>
                  </dl>
              </div>
          </template>
          <p v-else>暂无服务商</p>
      </Card>
      <Card style="marginTop:10px;">
          <p slot="title">
              <Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
              我的供应商
              <Poptip placement="right-start" trigger="hover"  content="服务商为提供采购物品的厂商。如须增加供应商，请联系平台客服。">
                <Icon  style="color:#2d8cf0;cursor:pointer" type="information-circled"></Icon>
              </Poptip>
          </p>
          <Button 
              v-if="supplierList.length>0"  
              slot="extra" 
              size="small" 
              class="zh-hollow" 
              type="warning"
              @click="sup_edit=!sup_edit"
              style="marginLeft:15px;"  
          >
              {{sup_edit?'完成':'管理'}}
          </Button>
          <template v-if="supplierList.length>0">
              <div class="zh-flex ">
                  <dl v-for="item in supplierList" :key="item.value" class="module-item">
                      <dt class="module-item-body">
                          <img :src="item.url" alt="">
                          <Icon @click.native="removeSup(item)" :size="25" v-if="sup_edit&&btnp.xtgl_fwsgli_sc" class="remove" type="minus-circled"></Icon>
                      </dt>
                      <dd class="module-item-foot">{{item.name}}</dd>
                  </dl>
              </div>
          </template>
          <p v-else>暂无供应商</p>
      </Card>
    </div>
</template>

<script>
import util from '@/libs/util.js'
import {
    getMyServiceList,
    deleteService,
    getMyProvideList,
    deleteProvide
} from '@/libs/system.js'
export default {
name:'',
  data () {
    return {
        btnp:{},
        btn:{
           xtgl_fwsgli_sc:false 
        },
        fac_edit:false,
        sup_edit:false,
        facilitatorList:[],
        supplierList:[],
    };
  },
  methods:{
        async getSData(){
            let res= await getMyServiceList();
            let response=res.data;
            if(response.code==200){
                this.facilitatorList=response.data.data;
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        async deleteS(uuid){
            let res= await deleteService(uuid);
            let response=res.data;
            if(response.code==200){
                this.$Notice.success({
                    desc:"已删除"
                });
                this.getSData();
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        async getPData(){
            let res= await getMyProvideList();
            let response=res.data;
            if(response.code==200){
                this.supplierList=response.data.data;
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        async deleteP(uuid){
            let res= await deleteProvide(uuid);
            let response=res.data;
            if(response.code==200){
                this.$Notice.success({
                    desc:"已删除"
                });
                this.getSData();
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
    /**移除服务商 */
        removeFac(opt){
            let config={
                    title:'删除服务商',
                    content:'删除服务商后不会删除该服务商下的历史数据，但新的运维任务无法分配给该服务商下的人员。删除后如须恢复，请联系平台客服',
                    render:h=>{
                        return h('div',{style:{padding:'30px 30px 0'}},[
                            h('p','删除服务商后不会删除该服务商下的历史数据，但新的运维任务无法分配给该服务商下的人员。'),
                            h('p','删除后如须恢复，请联系平台客服。')
                        ])
                    },
                    okText:'删除',
                    cancelText:'放弃操作',
                    onOk:()=>{
                        this.deleteS(opt.uuid);
                    }
                }
            this.$Modal.confirm(config)
        },
        /**移除供应商 */
        removeSup(opt){
            let config={
                    title:'删除供应商',
                    content:'删除供应商后不会删除历史数据，但无法继续采购该供应商提供的物品。删除后如须恢复，请联系平台客服。',
                    render:h=>{
                        return h('div',{style:{padding:'30px 30px 0'}},[
                            h('p','删除供应商后不会删除历史数据，但无法继续采购该供应商提供的物品。'),
                            h('p','删除后如须恢复，请联系平台客服。')
                        ])
                    },
                    okText:'删除',
                    cancelText:'放弃操作',
                    onOk:()=>{
                        this.deleteP(opt.uuid);
                    }
                }
            this.$Modal.confirm(config)
        },
    },
    created(){
        this.btnp=util.bpower(this,this.btn);
        this.getSData();
        this.getPData();
    }
}

</script>
<style lang='scss' >
.module-item{
    text-align:center;
    margin:5px 15px;
    &-body{
        width:120px;
        height:120px;
        position:relative;
        img{    
            width:120px;
            height:120px;
            display:block;
        }
        .remove{
            position:absolute;
            width:25px;
            height:25px;
            top:0;
            right:0;
            color:#ed3f14;
            z-index:100;
            cursor: pointer;
        }
    }
    &-foot{
        margin-top:10px;
    }
}
</style>